<template>
  <div class="app-list">
    <div class="app-list__header" v-if="slots.search || slots.action">
      <div class="app-list__search">
        <slot name="search"></slot>
      </div>
      <div class="app-list__action">
        <slot name="action"></slot>
      </div>
    </div>
    <div class="app-list-body">
      <slot></slot>
    </div>
    <div class="app-list__footer" v-if="slots.footer || slots.footerLeft || slots.footerRight">
      <slot name="footer"></slot>
      <div class="footer__left">
        <slot name="footerLeft"></slot>
      </div>
      <div class="footer__right">
        <slot name="footerRight"></slot>
      </div>
    </div>
  </div>
</template>
<script setup>
const slots = defineSlots()
</script>
<style lang="scss" scoped>
.app-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  // border-radius: 8px;
  overflow: hidden;
}

.app-list__header {
  display: flex;
  flex-direction: column;
  // background-color: red;

  .app-list__search{
    padding-bottom: 16px;
  }
  .app-list__action{
    padding-bottom: 8px;
  }
}


.app-list-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  // background-color: red;

}

.app-list__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  // box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.07);
  // border-top: 1px solid var(--border);
}
</style>

<style>
.app-list-body .el-table tr td {
  font-family: PingFangSC !important;
  border: none !important;
  font-size: 14px !important;
  color: #282828 !important;
}
.app-list-body .el-table tr td:first-child,
.app-list-body .el-table tr th:first-child {
  border-radius: 0;
}
.app-list-body .el-table tr td:last-child,
.app-list-body .el-table tr th:last-child {
  border-radius: 0;
}
</style>
